<template>
	<div>
		<use-table ref="tbl"></use-table>
		<div class="container last_container use-table">
			<div class="dflex_vertical_c margin_b_20 table-head">
				<div class="search_name">名称：</div>
				<el-input v-model="req.member_name" placeholder="请输入" class="search_input" @change="search" clearable>
				</el-input>
				<el-button size="mini" :loading="searchBtnLoading" class="search-btn margin_l_10" @click="search">搜索
				</el-button>
			</div>
			<el-table ref="etbl" :height="tblHeight" v-loading="tableLoading" :data="tableDatas" highlight-current-row
				@sort-change="sortable">
				<el-table-column label="头像" align="center">
					<template slot-scope="scope">
						<el-image class="headimg_small"
							:src="scope.row.member_headimg || 'https://7463-tcb-rflrz31u8yan4rr9ad60d-268679-1308293149.tcb.qcloud.la/1659579992133_0.png'"
							:preview-src-list="scope.row.previewImgs" fit="contain"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="名称" align="center">
					<template slot-scope="scope">
						<div>{{scope.row.member_name || '--'}}</div>
					</template>
				</el-table-column>
				<div slot="empty">
					<el-empty description=" "></el-empty>
				</div>
			</el-table>
		</div>
	</div>
</template>

<script>
	const __name = 'wmzmall-shopping-user';
	export default {
		data() {
			return {
				dataId: '',
				tableLoading: false,
				req: {
					member_name: ''
				},
				tblHeight: 0,
				tableDatas: [],
				searchBtnLoading: false
			};
		},
		methods: {
			async loadData(callback) {
				this.tableLoading = true;
				let noteUserRes = this.$db[__name]
					.collection()
					.where({
						_id: this.dataId
					})
					.getTemp();

				let ctx = this.$udb.collection(noteUserRes, 'wmzmall-member');

				ctx.get().then(res => {
					if (res.result.code == 0) {
						if (res.result.data[0]) {
							res.result.data[0].notep_fans.forEach((row, idx) => {
								row.previewImgs = [(row.member_headimg && row.member_headimg.replace(
										"/132", "/0")) ||
									'https://7463-tcb-rflrz31u8yan4rr9ad60d-268679-1308293149.tcb.qcloud.la/1659579992133_0.png'
								];
							});
							this.tableDatas = res.result.data[0].notep_fans;

							if (this.req.member_name) {
								this.tableDatas = this.tableDatas.filter(x => x.member_name.indexOf(this.req
									.member_name) != -1);
							}
						} else {
							this.tableDatas = res.result.data;
						}

						if (typeof callback === 'function') {
							callback();
						}
					}
					this.searchBtnLoading = false;
					this.tableLoading = false;
				});
			},
			search() {
				this.searchBtnLoading = true;

				this.loadData(() => {
					this.$refs.etbl.bodyWrapper.scrollTop = 0;
				});

				uni.setStorage({
					key: '__search' + this.$route.path + '-fans',
					data: this.req
				});
			}
		},
		created() {
			let __search = uni.getStorageSync('__search' + this.$route.path + '-fans');
			if (__search) {
				this.req = __search;
			}

			this.dataId = this.$route.query.id || '';
			this.loadData(() => {
				this.$nextTick(() => {
					this.$api.scrollToStorage('.el-table__body-wrapper', this.$route.path + '-fans');
				});
			});
		},
		mounted() {
			this.$nextTick(() => {
				this.$api.scrollOnStorage('.el-table__body-wrapper', this.$route.path + '-fans');
			});
		},
		updated() {
			if (!this.tblHeight) {
				this.tblHeight = this.$refs.tbl.tblHeight;
			}
		}
	};
</script>

<style></style>
